<template>
	<view>
		<div class="bc">
			<image src="../../static/index/logo背景@3x.png" mode="widthFix"></image>
		</div>
		<div class="logo">
			<image src="../../static/index/logo@3x.png" mode="widthFix"></image>
		</div>
		<div class="box">
			<div class="img">
				<image :src="userInform.avatar" mode=""></image>
				<div class="name">{{ userInform.name }}</div>
				<div class="text">好友邀请你注册乌豚邦app</div>
			</div>
			<div class="input">
				<input type="text" v-model="forms.phone" placeholder="请输入手机号">
				<input type="text" :disabled="userInform!=null" v-model="userInform.phone" placeholder="请输入邀请码">
			</div>
		</div>
		<div class="btn" @click="confirm">注 册</div>
		<view>
			<uni-popup ref="popup" type="center" background-color="rgba(0,0,0,0)">
				<div class="pop">
					<div class="text1">
						<img :src="msg===true?'../../static/提交确认@3x.png':'../../static/提交失败@3x.png'">
						<div class="h1">
							{{ msg===true?"注册成功":"注册失败" }}
						</div>
						<div class="h2">
							快来了解乌豚邦app
						</div>
					</div>
					<div class="btnsc" @click="gc">下载乌豚邦APP</div>
				</div>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import Api from "../../API/api";
	import Request from "../../API/request";
	import pathValue from "../../utils/pathValue";
	export default {
		data() {
			return {
				codes: "60",
				codeshow: true,
				url:"",
				dis: false,
				msg: false,
				userInform: {
					name: "乌豚邦",
					realName: "",
					phone: "",
          avatar: "../../static/index/logo.png",
					id: "",
				},
				forms: {
					phone: "",
						id: 0
				}

			}
		},
		onShow() {
			Api.getConfig().then(x => {
				console.log(x.data.home);
				this.url = x.data.download
			})
		},
		onLoad() {
			let uid = pathValue.getUrlValue("uid")
      console.log(uid)
      if(uid){
        Api.getAgentOne(uid).then(res=>{
          console.log(res)
          this.userInform.name = res.data.name
          this.userInform.avatar = res.data.avatar
          this.userInform.phone = res.data.phone
        })
      }
			// if (uid) {
			// 	Api.getPutUser(uid).then(x => {
			// 		// alert(JSON.stringify(x.data))
			// 		window.open(x.data)
			// 	})
			// } else {
			// 	let uid = pathValue.getUrlValue("state");
			// 	console.log("uid == " + uid)
			// 	uni.request({
			// 		url: Request.BASE_URL + "/api/manager/agent/support/getAgentOne?uid=" + uid,
			// 		method: "GET",
			// 		success: (res) => {
			// 			console.log(res)
			// 			if (res.data.data) {
			// 				this.userInform = res.data.data;
			// 				this.dis = true
			// 			}
			// 		}
			// 	})
			// }
		},
		methods: {
			validatePhoneNumber(phoneNumber) {
				var phoneRegex = /^1\d{10}$/;
				return phoneRegex.test(phoneNumber);
			},
			//确定
			gc() {
				window.open(this.url)
				this.$refs.popup.close()
			},
			confirm() {
        console.log(this.forms)
        let uid = pathValue.getUrlValue("uid")
				this.forms.id = uid;
				if (this.validatePhoneNumber(this.forms.phone)) {
          Api.getUserEnroll(this.forms).then(result =>{
            console.log(result.data)
            if (result.code == 0) {
              this.msg = true
              this.$refs.popup.open()
            } else {
              this.msg = false
              this.$refs.popup.open()
            }
          })
				} else {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'error'
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #fff;
	}

	.pop {
		background-color: #FFFFFF;
		width: 650rpx;
		height: 700rpx;
		//margin-bottom: 200rpx;
		border-radius: 50rpx;

		img {
			width: 100%;
		}

		.text1 {
			text-align: center;

			.h1 {
				font-size: 40rpx;
				font-weight: bold;
				color: #000000;
				//margin-top: 100rpx;
			}

			.h2 {
				margin-top: 10rpx;
				font-size: 30rpx;
				color: #000000;
				color: #ccc;
			}
		}

		.btnsc {
			width: 520rpx;
			height: 96rpx;
			background: linear-gradient(180deg, #FFBE00FF 0%, #FFC200FF 100%);
			border-radius: 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			position: relative;
			top: 30px;
			left: 50%;
			transform: translateX(-50%);
			color: #FFFFFF;
		}

	}

	.bc {
		width: 750rpx;
		height: 672rpx;
		background: linear-gradient(137deg, #FFBE00 0%, #FFC200 100%);
		box-shadow: inset 0rpx -8rpx 24rpx 0rpx rgba(255, 166, 0, 0.76);
		position: relative;
		top: 0;
		border-radius: 0 0 150rpx 150rpx;

		image {
			width: 100%;
		}
	}

	.logo {
		position: absolute;
		top: 150rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 145rpx;
		text-align: center;

		image {
			width: 145rpx;
		}
	}

	.box {
		backdrop-filter: blur(7px);
		//margin-top: 20rpx;
		margin: auto;
		text-align: center;
		width: 672rpx;
		height: 524rpx;
		background: rgba(255, 255, 255, 0.7);
		box-shadow: 0rpx 16rpx 16rpx 2rpx rgba(61, 74, 113, 0.06);
		border-radius: 30rpx;
		transform: translateY(-100rpx);

		.img {
			transform: translateY(-30rpx);
			margin-top: 100rpx;

			image {
				border: 5px solid #fff;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}

			.name {
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #070E2F;
				line-height: 44rpx;
				text-align: center;
			}

			.text {
				opacity: 60%;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #070E2FFF;
				text-align: center;
			}
		}

	}

	.input {
		margin: auto;
		width: 598rpx;

		input {
			width: 590rpx;
			height: 80rpx;
			background: #F5F6FA;
			border-radius: 48rpx;
			margin-bottom: 50rpx;
			margin-top: 20rpx;
			text-align: left;
			padding: 0 40rpx;
			box-sizing: border-box;
		}
	}

	.btn {
		width: 520rpx;
		height: 96rpx;
		background: linear-gradient(137deg, #FFBE00 0%, #FFC200 100%);
		border-radius: 48rpx;
		margin: auto;
		text-align: center;
		line-height: 96rpx;
		color: #fff;
		font-weight: 600;
	}
</style>